<template>
	<Nav class="f" bgColor="#020121">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#fff" size="34"></u-icon>
			</view>
			<view class="r-name">订单详情</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px', paddingBottom: '140rpx' }">
		<view class="bg" :style="{ marginTop: navHeiht + 'px' }"></view>
		<view class="content p-32">
			<view class="l-order dispaly-just-between">
				<view class="l-left">
					<view class="status">等待接单</view>
					<view class="y-status">当前已有0个师傅接单</view>
				</view>
				<!-- <view class="l-right dispaly-align-center">申请平台介入</view> -->
				<view class="l-right dispaly-align-center" @click="cancelOrderShow = true">取消订单</view>
				<!-- <view class="l-right dispaly-align-center" @click="$goUrl('/subPackage/index/submitCustomized')">重新发布</view> -->
			</view>
			<view class="common pro-info">
				<view class="title">晚礼服定制</view>
				<view class="desc">
					<view class="p-item dispaly-center">
						<view class="p-left">购买单号</view>
						<view class="p-right">GM251354513541</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">服装类型</view>
						<view class="p-right">中式礼服</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">发布时间</view>
						<view class="p-right">2024-07-25</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">预算金额</view>
						<view class="p-right">议价</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">需求说明</view>
						<view class="p-right">无</view>
					</view>
				</view>
				<view class="picture">
					<view class="pic-title">需求图片</view>
					<view class="img-list">
						<image
							v-for="(item, index) in 4"
							:key="index"
							src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
							mode="aspectFill"
						></image>
					</view>
				</view>
			</view>
			<view class="pro-info common">
				<view class="title">订单信息</view>
				<view class="desc">
					<view class="p-item dispaly-center">
						<view class="p-left">订单编号</view>
						<view class="p-right">GM251354513541</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">发布时间</view>
						<view class="p-right">2024-07-25</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">开始时间</view>
						<view class="p-right">2024-07-25</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">我寄出的</view>
						<view class="p-right">顺丰快递 SF261356461313</view>
					</view>
					<view class="p-item dispaly-center">
						<view class="p-left">我应收的</view>
						<view class="p-right">顺丰快递 SF261356461313</view>
					</view>
				</view>
			</view>

			<view class="pro-info common">
				<view class="title">制作师傅</view>
				<view class="t-box">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="t-item">
							<view class="top dispaly">
								<view class="avatar">
									<image class="user-avatar" :src="teacherList[0].avatar" mode="aspectFill"></image>
								</view>
								<view class="desc">
									<view class="desc-top dispaly-center">
										<view class="name">{{ teacherList[0].name }}</view>
										<view class="lv">{{ teacherList[0].lv }}</view>
									</view>
									<view class="detail over-2">{{ teacherList[0].desc }}</view>
								</view>
							</view>
							<view class="bottom dispaly-just-between">
								<view class="b-left dispaly-center">
									<view class="one-item dispaly-center">
										<view class="t">服务订单</view>
										<view class="c">{{ teacherList[0].num }}单</view>
									</view>
									<view class="one-item dispaly-center">
										<view class="t">报价</view>
										<view class="c">￥{{ teacherList[0].price.toFixed(2) }}</view>
									</view>
								</view>
								<view class="b-right">
									<view class="op-btn dispaly-center">
										<view class="call dispaly-align-center" @click="call(teacherList[0].tel)">联系Ta</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="pro-info common">
				<view class="title">支付信息</view>
				<view class="z-title dispaly-center">
					<view class="total">订单总价</view>
					<view class="total-money">￥51000.00</view>
				</view>
				<view class="list">
					<view class="list-item dispaly" v-for="(item, index) in 3" :key="index">
						<view class="z-left"></view>
						<view class="z-right">
							<view class="z-time">2024-08-08 12:02:30</view>
							<view class="z-money dispaly-center">
								<view class="money-num">￥10200.00</view>
								<view class="money-text">尾款</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pro-info common">
				<view class="title">接单师傅</view>
				<view class="t-box" v-if="teacherList.length">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="t-item" v-for="(item, index) in teacherList" :key="index">
							<view class="top dispaly">
								<view class="avatar">
									<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
									<image class="tip" src="/static/icon/tip.png" mode="aspectFill"></image>
								</view>
								<view class="desc">
									<view class="desc-top dispaly-center">
										<view class="name">{{ item.name }}</view>
										<view class="lv">{{ item.lv }}</view>
									</view>
									<view class="detail over-2">{{ item.desc }}</view>
								</view>
							</view>
							<view class="bottom dispaly-just-between">
								<view class="b-left dispaly-center">
									<view class="one-item dispaly-center">
										<view class="t">服务订单</view>
										<view class="c">{{ item.num }}单</view>
									</view>
									<view class="one-item dispaly-center">
										<view class="t">报价</view>
										<view class="c">￥{{ item.price.toFixed(2) }}</view>
									</view>
								</view>
								<view class="b-right">
									<view class="dd" v-if="index % 2 == 0">待师傅接单</view>
									<view class="op-btn dispaly-center" v-else>
										<view class="call dispaly-align-center" @click="call(item.tel)">联系Ta</view>
										<view class="sel dispaly-align-center" @click="$goUrl(`/subPackage/order/orderConfirm?id=${item.id}`)">选择Ta</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="n-t dispaly-align-center" v-else>暂无师傅接单</view>
			</view>
		</view>
	</view>

	<!-- 取消订单 -->
	<u-popup v-model="cancelOrderShow" mode="center" border-radius="20">
		<view class="cancel-main">
			<view class="cancel-title dispaly-align-center">取消订单</view>
			<view class="cancel-desc">
				<textarea cols="30" class="text" rows="10" placeholder="请输入"></textarea>
			</view>
			<view class="cancen-btn-box dispaly-align-center">
				<view class="no btn-common dispaly-align-center" @click="cancelOrderShow = false">取消</view>
				<view class="ok btn-common dispaly-align-center" @click="cancelOrderShow = false">确认提交</view>
			</view>
		</view>
	</u-popup>

	<!-- 发货 -->
	<u-popup v-model="deliveryShow" mode="center" border-radius="20">
		<view class="cancel-main">
			<view class="cancel-title dispaly-align-center">发货</view>
			<view class="cancel-desc">
				<input type="text" class="com" placeholder="请输入快递公司" />
				<input type="text" class="number" placeholder="请输入快递单号" />
			</view>
			<view class="cancen-btn-box dispaly-align-center">
				<view class="no btn-common dispaly-align-center" @click="deliveryShow = false">取消</view>
				<view class="ok btn-common dispaly-align-center" @click="deliveryShow = false">确认提交</view>
			</view>
		</view>
	</u-popup>

	<view class="bottom-btn-box dispaly-align-center">
		<view class="bottom-btn dispaly-align-center" @click="deliveryShow = true">发货</view>
		<!-- <view class="bottom-btn dispaly-align-center">确定支付二期款</view> -->
		<!-- <view class="bottom-btn dispaly-align-center">确定支付尾款</view> -->
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getElementHeight } from '@/utils/util';

// 图片预览
const priviewImage = (imageList, index) => {
	uni.previewImage({
		urls: [],
		current: 1
	});
};

const teacherList = ref([
	{
		id: 1,
		avatar: 'https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6',
		name: '坤坤',
		lv: '中级服装师',
		desc: '西服定制量身定做高级手工商务休 闲套装西服定制量身定做高级...',
		num: 216,
		price: 29.0,
		tel: '199999999'
	}
]);

// 联系
const call = (tel) => {
	uni.makePhoneCall({
		phoneNumber: tel
	});
};

// 取消订单
const cancelOrderShow = ref(false);
const cancelOrder = () => {};

// 发货
const deliveryShow = ref(false);
const delivery = () => {};

// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	for (var i = 0; i < 10; i++) {
		teacherList.value.push({
			id: 1,
			avatar: 'https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6',
			name: '坤坤',
			lv: '中级服装师',
			desc: '西服定制量身定做高级手工商务休 闲套装西服定制量身定做高级...',
			num: 216,
			price: 29.0,
			tel: '199999999'
		});
	}
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.r-name {
	color: #fff;
}

.common {
	padding: 32rpx 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.bg {
	background: linear-gradient(180deg, #020121 0%, rgba(2, 1, 33, 0) 100%);
	height: 378rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.content {
	.l-order {
		margin-bottom: 24rpx;

		.l-left {
			.status {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 36rpx;
				color: #ffffff;
				margin-bottom: 15rpx;
			}

			.y-status {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		.l-right {
			width: 144rpx;
			height: 56rpx;
			border-radius: 78rpx;
			border: 2rpx solid #7b7b89;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 22rpx;
			color: #ffffff;
		}
	}

	.pro-info {
		margin-top: 16rpx;

		.z-title {
			margin: 24rpx 0 16rpx 0;
			.total {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #020121;
			}
			.total-money {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 28rpx;
				color: #020121;
			}
		}
		.list {
			background: #f4f6f8;
			border-radius: 16rpx;
			padding: 24rpx;
			.list-item:last-child {
				margin-bottom: 0;
			}
			.list-item {
				margin-bottom: 24rpx;
				.z-left {
					width: 14rpx;
					height: 14rpx;
					background: #d8d8d8;
					border-radius: 50%;
					margin-right: 16rpx;
					margin-top: 10rpx;
				}
				.z-right {
					.z-time {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 24rpx;
						color: #7b7b89;
					}
					.z-money {
						.money-num {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 500;
							font-size: 28rpx;
							color: #020121;
							margin-right: 16rpx;
						}
						.money-text {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 24rpx;
							color: #b6b6bb;
						}
					}
				}
			}
		}

		.title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 32rpx;
			color: #020121;
			margin-bottom: 24rpx;
		}

		.desc {
			.p-item:last-child {
				margin-bottom: 0;
			}

			.p-item {
				margin-bottom: 16rpx;

				.p-left {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #7b7b89;
					margin-right: 40rpx;
				}

				.p-right {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #020121;
				}
			}
		}

		.picture {
			margin-top: 16rpx;

			.pic-title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7b7b89;
				margin-right: 40rpx;
			}

			.img-list {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 20rpx;
					margin: 8rpx;
				}
			}
		}

		.n-t {
			width: 100%;
			height: 200rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 28rpx;
			color: #b6b6bb;
		}

		.t-box {
			.scroll-Y {
				.t-item:last-child {
					margin-bottom: 0;
				}

				.t-item {
					border-bottom: 1rpx solid #f5f5f5;
					padding-bottom: 16rpx;
					margin-bottom: 16rpx;

					.top {
						.avatar {
							position: relative;
							margin-right: 16rpx;
							width: 200rpx;
							height: 160rpx;

							.user-avatar {
								width: 200rpx;
								height: 160rpx;
								border-radius: 20rpx;
							}

							.tip {
								width: 48rpx;
								height: 48rpx;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}
					}

					.desc {
						.desc-top {
							.name {
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 500;
								font-size: 32rpx;
								color: #020121;
								margin-right: 10rpx;
							}

							.lv {
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 500;
								font-size: 20rpx;
								color: #ffffff;
								padding: 6rpx 10rpx;
								background: #020121;
								border-radius: 8rpx;
							}
						}

						.detail {
							margin-top: 10rpx;
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #7b7b89;
							line-height: 40rpx;
						}
					}

					.bottom {
						.b-left {
							.one-item:first-child {
								margin-right: 40rpx;
							}

							.one-item {
								.t {
									font-family: Source Han Sans, Source Han Sans;
									font-weight: 400;
									font-size: 20rpx;
									color: #7b7b89;
								}

								.c {
									font-family: Source Han Sans, Source Han Sans;
									font-weight: 500;
									font-size: 20rpx;
									color: #020121;
								}
							}
						}

						.b-right {
							.dd {
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 400;
								font-size: 24rpx;
								color: #b6b6bb;
							}

							.op-btn {
								.call,
								.sel {
									width: 100rpx;
									height: 48rpx;
									border-radius: 24rpx;
									font-family: Source Han Sans, Source Han Sans;
									font-weight: 400;
									font-size: 24rpx;
								}

								.call {
									border: 2rpx solid #eaeaea;
									color: #020121;
									margin-right: 8rpx;
								}

								.sel {
									margin-left: 8rpx;
									background: linear-gradient(132deg, #7b7b89 0%, #020121 100%);
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}
}

.cancel-main {
	padding: 40rpx;
	.cancel-title {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 32rpx;
		color: #020121;
		margin-bottom: 24rpx;
	}
	.cancel-desc {
		.text {
			height: 240rpx;
			background: #f4f6f8;
			border-radius: 16rpx;
			padding: 20rpx;
		}
		input {
			width: 560rpx;
			height: 68rpx;
			background: #f4f6f8;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
		}
		.com {
			margin-bottom: 16rpx;
		}
	}
	.cancen-btn-box {
		margin-top: 28rpx;
		.no,
		.ok {
			width: 176rpx;
			height: 72rpx;
			background: #b6b6bb;
			border-radius: 60rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}
		.no {
			background: #b6b6bb;
			margin-right: 24rpx;
		}
		.ok {
			background: #020121;
			margin-left: 24rpx;
		}
	}
}

.bottom-btn-box {
	height: 120rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16rpx 32rpx;
	.bottom-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(138deg, #7b7b89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
